<template>
	<u-popup v-model="show" mode="bottom" :mask="false" z-index="9000">
		<view class="setting-box" :style="{'background': readTheme.mainBackground}">
			<view class="setting-item">
				<view class="setting-title">
					字体大小
				</view>
				<view class="setting-content">
					<u-number-box v-model="readSetting.fontSize" :min="12" :max="30" :disabled-input="true" @change="onChange"></u-number-box>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-title">
					页面边距
				</view>
				<view class="setting-content">
					<u-radio-group v-model="readSetting.pagePadding" @change="onChange">
						<u-radio name="0"> 无 </u-radio>
						<u-radio name="20"> 小 </u-radio>
						<u-radio name="40"> 中 </u-radio>
						<u-radio name="80"> 大 </u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-title">
					段落距离
				</view>
				<view class="setting-content">
					<u-radio-group v-model="readSetting.sectionDistance" @change="onChange">
						<u-radio name="0"> 小 </u-radio>
						<u-radio name="1"> 中 </u-radio>
						<u-radio name="2"> 大 </u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="setting-item">
				<view class="setting-title">
					行间距离
				</view>
				<view class="setting-content">
					<u-radio-group v-model="readSetting.lineDistance" @change="onChange">
						<u-radio name="30"> 小 </u-radio>
						<u-radio name="38"> 中 </u-radio>
						<u-radio name="60"> 大 </u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import _ from 'lodash'
	export default {
		data() {
			return {
				show: false,

			}
		},
		computed: {
			...mapState({
				readSetting: state => state.setting.readSetting
			}),
			...mapGetters({
				readTheme: 'readTheme'
			})
		},
		methods: {
			onChange: _.throttle(function(e) {
				this.$store.commit('UPDATE_READ_SETTING')
			}, 200, {
				'trailing': false
			})
		}
	}
</script>

<style lang="scss" scoped>
	.setting-box {
		padding: 40rpx;

		.setting-item {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.setting-title {
				margin-right: 20rpx;
			}

			.setting-content {}
		}

	}
</style>
